<template>
  <div class="notice-box">
    <van-nav-bar
      title="星球公告"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh" class="container">
      <van-list
        v-model="loading"
        :finished="finished"
        @load="onLoad"
        :immediate-check="false"
      >
        <div
          v-for="(item, index) in list"
          :key="index"
          class="cell"
        >
          <div class="cell-title">{{ item.title }}</div>
          <div class="cell-desc">{{ item.desc }}</div>
          <div class="cell-footer">{{ item.date }}</div>
        </div>

        <div class="no-data" v-if="finished">
          没有更多数据
        </div>
      </van-list>
    </van-pull-refresh>
    <div class="circle" v-if="isCircleLoading">
      <van-loading :size="'100px'" color="black" />
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      isCircleLoading: true,
      list: [],
      loading: false,
      finished: false,
      isLoading: false,
      pageIndex: 0,
      pageCount: 10
    }
  },
  mounted() {
    this.getPageInfo()
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1)
    },
    onLoad() {
      this.getPageInfo()
      this.pageIndex ++
    },
    getPageInfo() {
      let params = {}
      if(this.pageIndex != 0) {
        params.page = this.pageIndex + 1
      }
      // 头部信息
      this.$axios({
        method: 'GET',
        url: url_g + '/notification/',
        params: params
      }).then((res) => {
        if(res.data) {
          let newArr = res.data.results
          this.pageCount = res.data.count

          for (let i = 0; i < newArr.length; i ++) {
            newArr[i].date = this.formatDateTime(newArr[i].created_on)
            this.list.push(newArr[i])
          }

          this.loading = false
          this.isLoading = false
          this.isCircleLoading = false
          if (this.list.length >= this.pageCount) {
            this.finished = true
          }
        }
      }).catch((e) => {
        console.error('GET err:' + e);
      });
    },
    onRefresh() {
      setTimeout(() => {
        this.isCircleLoading = true
        this.pageIndex = 0
        this.list = []
        this.getPageInfo()
      }, 500)
    },
    formatDateTime (date) {
      let time = new Date(Date.parse(date));
      // if (!isNaN(time)) {
      //     return new Date(Date.parse(date.replace(/-/g, "/")));
      // } else {
      let Y = time.getFullYear() + '-';
      let M = this.addZero(time.getMonth() + 1) + '-';
      let D = this.addZero(time.getDate()) + ' ';
      let h = this.addZero(time.getHours()) + ':';
      let m = this.addZero(time.getMinutes()) + ':';
      let s = this.addZero(time.getSeconds());
      return Y + M + D + h + m + s;
      // }
    },
    // 数字补0操作
    addZero(num) {
      return num < 10 ? '0' + num : num;
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
p {
  margin: 0;
  font-size: 14px;
}
.notice-box {
  height: 100vh;
  overflow: auto;
  background: url('/static/img/game/game_bg.png') no-repeat;
  background-size: 100% 100%;
}
.container {
  height: calc(100% - 66px);
  overflow: auto;
  padding: 10px;
}
.cell {
  background-color: #fff;
  border-radius: 10px;
  margin-bottom: 15px;
  padding: 10px;
}
.cell-title {
  font-weight: bold;
  font-size: 18px;
  line-height: 40px;
}
.cell-desc {
  font-size: 14px;
  color: #333;
  line-height: 24px;
  margin: 5px 0;
}
.cell-footer {
  font-size: 12px;
  color: #777;
  line-height: 30px;
}
.no-data {
  font-size: 12px;
  color: #777;
  text-align: center;
}
.circle {
  display: flex;
  justify-content: center;
  margin-top: 100px;
  width: 100%;
  text-align: center;
}
</style>
